<template>
  <div :class="$style.wrap">
    <Title title="主数据信息" :title-class="$style.title" style="padding-top:0"></Title>
    <List :column="4" sep=":" :gutter="24">
      <ListItem label="经销商法人" :value="info.legalPerson"></ListItem>
      <ListItem label="身份证号码" :value="info.credentialNo"></ListItem>
      <ListItem label="营业状态" dict-type-code="KQ_OPERATING_STATUS" :value="info.businessStatus || '--'"></ListItem>
      <ListItem label="总面积" :value="area"></ListItem>
      <ListItem label="门店数量" :value="sum"></ListItem>
      <ListItem label="客户经理" :span="24">
        <FlowCustomer v-for="(f,i) in info.customizeAccount" :key="i" :flow="f" />
      </ListItem>
    </List>
    <Title title="门店信息" :title-class="$style.title" style="padding-top:0">
      <span :class="$style.shopListControl" @click="shopListShow=!shopListShow">{{ shopListShow?'收起':'展开' }}</span>
    </Title>
    <el-collapse-transition>
      <div v-show="shopListShow">
        <table-box ref="table" :table-height="200" no-request :table-config="tableConfig" @data-change="sumArea" />
      </div>
    </el-collapse-transition>
  </div>
</template>
<script>
import Title from '@/components/Title'
import { List, ListItem } from '@/components/List'
import FlowCustomer from './FlowCustomer'
export default {
  name: 'BaseInfo',
  components: {
    Title,
    List,
    ListItem,
    FlowCustomer
  },
  props: {
    info: {
      type: Object,
      default: () => []
    }
  },
  data() {
    return {
      area: 0,
      sum: 0,
      shopListShow: false,
      url: '/call-center/api/v1/mscInfo/shop/page',
      tableConfig: {
        interfacePath: '',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段动态配置
        setting: [
          {
            prop: 'shopCode',
            label: '门店编码'
          },
          {
            prop: 'shopName',
            label: '门店名称'
          },
          {
            prop: 'shopClassifyName',
            label: '门店类型'
          },
          {
            prop: 'operateArea',
            label: '经营总面积'
          },
          {
            prop: 'description',
            label: '业务类型'
          },
          {
            prop: 'debutOpenTime',
            width: 125,
            label: '首次开业日期'
          },
          {
            prop: 'shopServPhone',
            width: 120,
            label: '门店售后电话'
          },
          {
            prop: 'businessStatus',
            label: '营业状态',
            propEnum: {
              dictTypeCode: 'KQ_OPERATING_STATUS',
              appCode: 'call-center',
              domainCode: 'marketing'
            }
          },
          {
            prop: 'shopAddr',
            label: '详细地址'
          }
        ]
      }
    }
  },
  watch: {
    info: {
      handler() {
        const ids = this.info.ids || []
        if (ids.length <= 0) return
        this.tableConfig.interfacePath = `${this.url}?customerIds=${ids.join(',')}`
        this.$nextTick(() => {
          this.$refs.table.initTableData()
        })
      },
      immediate: true
    }
  },
  methods: {
    // 计算门店总面积,数量,选出面积最大值
    sumArea(res) {
      let area = 0
      let sum = 0
      let maxArea = 0
      for (const item of res.data.records || []) {
        area += item.operateArea
        sum += 1
        if (maxArea <= item.operateArea) {
          maxArea = item.operateArea
          this.$emit('maxAreaShop', item)
        }
      }
      this.area = area
      // 门店数量
      this.sum = sum
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
.shopListControl{
  font-weight: 400;
  margin-left: 12px;
  font-size: 12px;
  cursor: pointer;
  color: #16BC83 !important;
}
.title{
  color: rgba(0,0,0,0.85);
  font-size: 16px;
  font-weight: 700;
}
}
</style>
